<template>
	<view class="page">
		<image class="loginBg" src="../../static/loginBg.png"></image>
    <view class="content">
      <view class="title">HELLO!</view>
      <view class="title">欢迎来到</view>
      <view class="title">XXXX平台管理系统</view>
      <view class="lable">账号登录</view>
      <view class="input">
        <input :maxlength="11" :class="{fill: userName}" v-model="userName" placeholder-class="placeholder" placeholder="账号">
      </view>
      <view class="input">
        <input :maxlength="66" :class="{fill: password}" v-model="password" placeholder-class="placeholder" password placeholder="密码">
      </view>
      <view :style="[inputStyle]" class="btn" @click="loginPwd">登录</view>
    </view>
	</view>
</template>

<script>
import { login } from '@/api/index'

export default {
  data() {
    return {
      userName: 'kingdee',
      password: '2wsx@WSX',
    }
  },
  computed: {
    inputStyle() {
      let style = {};
      if(this.userName !== '' && this.password !== '') {
        style.background = '#3467FA';
      }
      return style;
    }
  },
  onLoad() {

  },
  methods: {
    loginPwd() {
      const that = this
      if(this.userName === '' || this.password === '') {
        uni.showToast({
          title: '请填写账号或密码',
          icon: 'none'
        });
        return
      }
      const {userName, password} = this
      uni.showLoading({ mask: true });
      const parameters = ["6757adab495b99",userName,password,2052]
      login({parameters}).then(res => {
        uni.hideLoading();
        if(res.LoginResultType == 1) {
          console.log(res);
          const userInfo = {
            CustomName: res.Context.CustomName || '',
            DBid: res.Context.DBid || '',
            DataCenterName: res.Context.DataCenterName || '',
            DataCenterNumber: res.Context.DataCenterNumber || '',
            Gsid: res.Context.Gsid || '',
            SessionId: res.Context.SessionId || '',
            UserName: res.Context.UserName || '',
            UserId: res.Context.UserId || '',
            UserToken: res.Context.UserToken || '',
          }
          uni.setStorageSync('userInfo', userInfo)
          that.jumpTo('/pages/login/org', {token: res.KDSVCSessionId})
        } else {
          uni.showToast({
            title: '系统错误,登录失败',
            icon: 'none'
          });
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background: #FFF;
  position: relative;
  .loginBg {
    position: absolute;
    width: 750rpx;
    image {
      width: 750rpx;
      height: 636rpx;
    }
  }
  .content {
    position: absolute;
    width: 750rpx;
    top: 250rpx;
    left: 0;
    z-index: 1;
    padding: 0 68rpx;
    .title {
      color: #000;
      font-family: "PingFang SC";
      font-size: 40rpx;
      font-weight: 500;
      line-height: 52rpx;
    }
    .lable {
      margin-top: 100rpx;
      color: #3467FA;
      font-family: "PingFang SC";
      font-size: 30rpx;
      margin-bottom: 30rpx;
    }
    .input {
      width: 100%;
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;
      justify-items: flex-start;

      input {
        flex: 1;
        height: 80rpx;
        border-radius: 10rpx;
        background: #F7FAFC;
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border: 2rpx solid #F7FAFC;
        color: #333;
        font-family: "PingFang SC";
        font-size: 30rpx;
      }
      .fill {
        border-color: #3264ED;
      }
      .placeholder {
        color: #C7C7C7;
      }
      image {
        width: auto;
        height: 60rpx;
        margin-left: 50rpx;
      }
    }
    .btn {
      margin-top: 110rpx;
      width: 100%;
      border-radius: 10rpx;
      height: 80rpx;
      background: rgba(52, 103, 250, .5);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFF;
      font-family: "PingFang SC";
      font-size: 36rpx;
    }
  }
}
</style>
